
<!-- Template for home view -->
<div ng-show="!map.isShowingMapNotHome" class="content-wrapper home-view-content-wrapper">
    <!-- Main content -->
    <div ng-show="root.twitterSession && root.doneGettingFeed" class="container content-container">
      
        <!-- Left content: Who to follow, trends -->
        <div class="left-result-container col-md-4 col-sm-12 col-lg-3" ng-show="root.twitterSession">
            
            <div class="switchers">
                <div class="switch-to-map" ng-click="map.toggleMapAndTimeline();">
                    <span>Open Map</span>
                    <span class="fa fa-chevron-circle-right">
                    </span>    
                </div>
                <div class="switch-to-timeline-text" ng-click="map.toggleMapAndTimeline();">
                    <span class="fa fa-chevron-circle-left">
                    </span>
                    <span>Timeline</span>    
                </div>
            </div>

            <div class="home-user-info">
                <div class="blue-background-placeholder">
                    <img ng-src="{{root.twitterSession.profile_banner_url }}" alt="user-banner-photo" ng-show="root.twitterSession.profile_banner_url">    
                </div>
                <div class="home-user-info-content">
                    <div class="top-content">
                        <img ng-src="{{root.twitterSession.profile_image_url_https | homePageImage }}">
                        <div class="name-and-screen-name">
                            <span class="home-user-name">{{root.twitterSession.name}}</span>
                            <span class="home-user-screen-name">@{{root.twitterSession.screen_name}}</span>
                        </div>
                    </div>
                    <div class="bottom-content">
                        <div class="user-no-tweets">
                            <a href="">Tweets<br><span>{{root.twitterSession.statuses_count}}</span></a>
                        </div>
                        <div class="user-no-followings">
                            <a href="">Following<br><span>{{root.twitterSession.friends_count}}</span></a>
                        </div>
                        <div class="user-no-followers">
                            <a href="">Followers<br><span>{{root.twitterSession.followers_count}}</span></a>
                        </div>
                    </div>
                    <div ng-show="root.twitterSession.description" class="user-info-text">
                        {{root.twitterSession.description}}
                    </div>
                </div>
            </div>

            <div ng-show="userTopology.followers.length !== 0" class="followers-list-container">
                <h2>Followers<span ng-click="map.showAllFollowers();" ng-show="userTopology.followers.length > map.showFollowersLimit">Show all</span></h2>
                <div class="followers-link-container clearfix">
                    <a class="topology-item" ng-repeat="item in userTopology.followers | limitTo: map.showFollowersLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
                        <img ng-src="{{item.profile_image_url_https}}">
                    </a>
                </div>
            </div>  




            <div ng-show="userTopology.following.length !== 0" class="followers-list-container">
                <h2>Following<span ng-click="map.showAllFollowings();" ng-show="userTopology.following.length > map.showFollowingsLimit">Show all</span></h2>
                <div class="followers-link-container clearfix">
                    <a class="topology-item" ng-repeat="item in userTopology.following | limitTo: map.showFollowingsLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
                        <img ng-src="{{item.profile_image_url_https}}">
                    </a>
                </div>
            </div>  

        </div>
        <!-- Center result + option filters -->
        <div class="center-result-container col-md-8 col-sm-12 col-lg-6" ng-show="root.twitterSession">
            <div class="row cms-view">
                <div class="main-result-container">
                    <button ng-show="root.timelineNewTweets.length > 0" class="timeline-more-result" ng-click="root.timelineShowNewerTweets();">Load {{root.timelineNewTweets.length}} new tweets!</button>
                    <div class="statuses-container box-body chat" id="chat-box" style="width: auto;" infinite-scroll="root.loadMoreHomeFeed(15)">
                        <div ng-repeat="status in root.twitterFriends.data | limitTo: root.homeFeedLimit" ng-attr-id="{{status.id}}" ng-click="map.openPopup(status.id);">
                            <div class="item" ng-click="toggleDetail($event)">
                                <img class="friend-profile-img" src="{{status.profile_image_url}}">
                                <p class="message home-tweet-text">
                                <span class="home-user-screen-name">@{{ status.screen_name }} - </span><span time ng-attr-timecreated="{{status.status.created_at}}"></span>
                                <br>
                                <span ng-bind-html="status.status.text | tweetTextLink | tweetMention | tweetHashtag | removeTwitterPicLink | toTrusted "></span>
                                </p>

                                <div class="home-debugged-link-container" home-debugged-link entities="status.status.entities"></div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>

        <!-- Right content: Other statistics -->
        <div class="right-result-container col-md-3 visible-lg">
            <div class="home-user-trends">
                <h3 class="trend-title">Trends</h3>
                <ul id="home-trend-list">
                    <li><a href="./search?q=%23loklak">#loklak</a></li>
                    <li ng-repeat="(key, value) in root.trends">
                        <!-- -->
                        <a href="./search?q=%23{{key}}">#{{key}}</a>
                        <!-- -->
                    </li>
                </ul>
            </div>

            <div class="credits-container">
                <div class="credits">
                    <a>© 2015 loklak</a><span>-</span>
                    <a href="./about">About</a><span>-</span>
                    <a href="http://blog.loklak.net/" target="_blank" >Blog</a><span>-</span>
                    <a href="https://github.com/loklak" target="_blank" >Github</a><span>-</span>
                    <a href="http://facebook.com/loklakmessages" target="_blank" >Facebook</a>
                </div>
            </div>
        </div>

    </div>


    <div class="logged-content map-container-parent" ng-show="root.twitterSession">
       <span class="toggle-map-feed fa fa-chevron-circle-right" ng-click="map.toggleMapFeed();"></span>
       <div id="map" ng-show="root.twitterSession"></div>
    
        <div class="location-fail-notice">
          <div class="warning-sign"><i class="fa fa-exclamation-triangle"></i></div>
          <p class="notice-text">The user you're searching for doesn't seem to have location enabled!</p>
        </div>
    </div>  
    <!-- Search box for anonymous user-no-followers -->
    <div ng-include src="'anonymous-session-content.html'"></div>
    <!-- End search box for anonymous users -->

</div>

